<template>
  <mpvue-echarts :echarts="echarts" :onInit="onInit" canvasId="bar-canvas" />
</template>

<script>
import echarts from "echarts";
import mpvueEcharts from "mpvue-echarts";
let chart;

function initChart(canvas, width, height) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  const option = {};
  canvas.setChart(chart);
  chart.setOption(option);
  return chart; // 返回 chart 后可以自动绑定触摸操作
}
export default {
    props: {
        type: {
            type: String
        },
        data: {
          type: Object,
          default: {
            data: [],
            date: []
          }
        },
        update: {
          type: Boolean
        }
    },
  components: {
    mpvueEcharts
  },
  data() {
    return {
      echarts,
      onInit: initChart,
    };
  },
  computed: {
      barColor() {
          const colorMap = {
              all: '#FFABBC',
              listening: '#FFD733',
              speaking: '#50E3C2',
              reading: '#BC88F7',
              writing: '#678AFF'
          }
          return colorMap[this.type] || '#eeeeee'
      },
    calcOpt() {
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "transparent"
            }
          },
          formatter(params) {
            return (params[0].data - 0).toFixed(1);
          },
          backgroundColor: "#DDF5F3",
          padding: [3, 10, 0, 10],
          textStyle: {
            color: "#3D475C",
            fontSize: "16px",
            extraCssText: "box-shadow:0px 4px 8px 0px rgba(166,191,189,1);"
          }
        },
        title: {
          textStyle: {
            height: 0
          }
        },
        grid: {
          left: 30,
          top: 20,
          right: 10,
          bottom: 10
        },
        xAxis: {
          data: this.data.date,
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          max: 9,
          min: 4.5,
          splitNumber: 4,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          nameGap: 4,
          axisLabel: {
            textStyle: {
              color: "#9DA3AC",
              fontSize: 9
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#eeeeee",
              width: 1
            }
          }
        },
        dataZoom: [
          {
            type: "inside"
          }
        ],
        series: [
          {
            type: "bar",
            left: 0,
            right: 0,
            bottom: 0,
            left: 0,
            barCategoryGap: "40%",
            itemStyle: {
              color: "#E5E5E5",
              barWidth: 9,
              barBorderRadius: [7, 7, 0, 0]
            },
            emphasis: {
              itemStyle: {
                color: this.barColor
              }
            },
            data: this.data.data
          }
        ]
      };
    }
  },
  watch: {
    calcOpt: {
      immediate: true,
      deep: true,
      handler() {
        let timer;
        const updateChart = () => {
          if (chart) {
            chart.setOption(this.calcOpt);
            clearTimeout(timer);
          } else {
            timer = setTimeout(updateChart, 100);
          }
        };
        updateChart();
      }
    },
    update() {
      if (this.update === true) {
        setTimeout(() => {chart.setOption(this.calcOpt);}, 300);
        this.$emit('endUpdate')
      }
    }
  },
  methods: {
    initEvent() {
      // 有问题 todo
      // Enable data zoom when user click bar.
      const zoomSize = 6;
      chart.on("click", params => {
        chart.dispatchAction({
          type: "dataZoom",
          startValue: this.data.date[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue:
            this.data.date[
              Math.min(params.dataIndex + zoomSize / 2, this.data.length - 1)
            ]
        });
      });
    }
  },
  mounted() {
    // 创建事件
    //   setTimeout(this.initEvent, 500);
  }
};
</script>

<style lang="less" scoped>
</style>